<%@ page import="java.math.BigDecimal" %><%-- 导入BigDecimal类，用于处理货币 --%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %> <!-- 设置页面内容类型和语言 -->
<html>
<head>
    <title>游戏详情</title> <!-- 页面标题 -->
    <style>
        * {
            margin: 0; /* 清除默认边距 */
            padding: 0; /* 清除默认内边距 */
            box-sizing: border-box; /* 设置盒模型为border-box */
        }

        body {
            font-family: 'Microsoft YaHei', Arial, sans-serif; /* 设置字体 */
            background-color: #f4f4f4; /* 设置背景颜色 */
            line-height: 1.6; /* 设置行高 */
            min-height: 100vh; /* 设置最小高度为100vh */
            display: flex; /* 使用flex布局 */
            flex-direction: column; /* 垂直排列 */
        }

        /* 头部样式 */
        .header {
            background-color: #fff; /* 头部背景颜色 */
            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); /* 添加阴影效果 */
            padding: 15px 50px; /* 设置内边距 */
            position: fixed; /* 固定头��� */
            width: 100%; /* 头部宽度100% */
            top: 0; /* 顶部对齐 */
            z-index: 1000; /* 设置层级 */
        }

        .header-content {
            display: flex; /* 使用flex布局 */
            justify-content: space-between; /* 两端对齐 */
            align-items: center; /* 垂直居中 */
            max-width: 1200px; /* 最大宽度 */
            margin: 0 auto; /* 水平居中 */
        }

        .logo {
            display: flex; /* 使用flex布局 */
            align-items: center; /* 垂直居中 */
            gap: 10px; /* 设置间距 */
            text-decoration: none; /* 去掉下划线 */
            color: #333; /* 字体颜色 */
        }

        .logo span {
            font-size: 24px; /* 字体大小 */
            font-weight: bold; /* 字体加粗 */
        }

        .nav-links {
            display: flex; /* 使用flex布局 */
            gap: 30px; /* 设置间距 */
        }

        .nav-links a {
            text-decoration: none; /* 去掉下划线 */
            color: #333; /* 字体颜色 */
            font-size: 16px; /* 字体大小 */
            transition: color 0.3s; /* 添加过渡效果 */
        }

        .nav-links a:hover {
            color: #007bff; /* 悬停时字体颜色 */
        }

        .auth-buttons {
            display: flex; /* 使用flex布局 */
            gap: 15px; /* 设置间距 */
        }

        .auth-buttons a {
            text-decoration: none; /* 去掉下划线 */
            padding: 8px 20px; /* 设置内边距 */
            border-radius: 4px; /* 设置圆角 */
            transition: all 0.3s; /* 添加过渡效果 */
        }

        .login-btn {
            color: #007bff; /* 登录按钮字体颜色 */
            border: 1px solid #007bff; /* 登录按钮边框 */
        }

        .login-btn:hover {
            background-color: #007bff; /* 悬停时背景颜色 */
            color: #fff; /* 悬停时字体颜色 */
        }

        .register-btn {
            background-color: #007bff; /* 注册按钮背景颜色 */
            color: #fff; /* 注册按钮字体颜色 */
            border: 1px solid #007bff; /* 注册按钮边框 */
        }

        .register-btn:hover {
            background-color: #0056b3; /* 悬停时背景颜色 */
            border-color: #0056b3; /* 悬停时边框颜色 */
        }

        .main-content {
            margin-top: 80px; /* 设置顶部外边距 */
            padding: 20px; /* 设置内边距 */
            max-width: 1200px; /* 最大宽度 */
            margin-left: auto; /* 左右居中 */
            margin-right: auto; /* 左右居中 */
            margin-bottom: 80px; /* 设置底部外边距 */
            background-color: #fff; /* 主内容背景颜色 */
            border-radius: 8px; /* 设置圆角 */
            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); /* 添加阴影效果 */
            display: flex; /* 使用flex布局 */
            min-height: 400px; /* 设置最小高度 */
            max-height: calc(100vh - 200px); /* 设置最大高度 */
        }

        .image-container {
            flex: 1; /* 填充剩余空间 */
            padding: 20px; /* 设置内边距 */
            display: flex; /* 使用flex布局 */
            align-items: center; /* 垂直居中 */
            justify-content: center; /* 水平居中 */
        }

        .details-container {
            flex: 1; /* 填充剩余空间 */
            padding: 20px; /* 设置内边距 */
            display: flex; /* 使用flex布局 */
            flex-direction: column; /* 垂直排列 */
            justify-content: space-between; /* 在主轴上分散对齐 */
        }

        .game-title {
            font-size: 24px; /* 字体大小 */
            font-weight: bold; /* 字体加粗 */
            margin-bottom: 10px; /* 下边距 */
        }

        .game-description {
            color: #666; /* 字体颜色 */
            font-size: 16px; /* 字体大小 */
            margin-bottom: 15px; /* 下边距 */
        }

        .game-image {
            width: 100%; /* 图片宽度100% */
            height: auto; /* 高度自适应 */
            max-height: 350px; /* 设置最大高度 */
            object-fit: contain; /* 保持比例填充 */
            border-radius: 8px; /* 设置圆角 */
            margin-bottom: 15px; /* 下边距 */
        }

        .game-link {
            display: inline-block; /* 行内块元素 */
            padding: 10px 15px; /* 设置内边距 */
            background-color: #007bff; /* 背景颜色 */
            color: #fff; /* 字体颜色 */
            text-decoration: none; /* 去掉下划线 */
            border-radius: 4px; /* 设置圆角 */
            transition: background-color 0.3s; /* 添加过渡效果 */
        }

        .game-link:hover {
            background-color: #0056b3; /* 悬停时背景颜色 */
        }

        .cart-button {
            display: inline-block; /* 行内块元素 */
            padding: 10px 15px; /* 设置内边距 */
            background-color: #28a745; /* 背景颜色 */
            color: #fff; /* 字体颜色 */
            text-decoration: none; /* 去掉下划线 */
            border-radius: 4px; /* 设置圆角 */
            transition: background-color 0.3s; /* 添加过渡效果 */
            margin-left: 10px; /* 左边距 */
            border: none; /* 去掉边框 */
            cursor: pointer; /* 鼠标指针样式 */
        }

        .cart-button:hover {
            background-color: #218838; /* 悬停时背景颜色 */
        }

        .cart-button2 {
            display: inline-block; /* 行内块元素 */
            padding: 10px 15px; /* 设置内边距 */
            background-color: #17a2b8; /* 背景颜色 */
            color: #fff; /* 字体颜色 */
            text-decoration: none; /* 去掉下划线 */
            border-radius: 4px; /* 设置圆角 */
            transition: background-color 0.3s; /* 添加过渡效果 */
            margin-left: 10px; /* 左边距 */
            border: none; /* 去掉边框 */
            cursor: pointer; /* 鼠标指针样式 */
        }

        .cart-button2:hover {
            background-color: #138496; /* 悬停时背景颜色 */
        }

        /* 购物车弹窗样式 */
        .cart-modal {
            display: none; /* 默认隐藏 */
            position: fixed; /* 固定定位 */
            top: 50%; /* 垂直居中 */
            left: 50%; /* 水平居中 */
            transform: translate(-50%, -50%); /* 通过变换居中 */
            width: 100%; /* 宽度100% */
            max-width: 800px; /* 设置最大宽度 */
            background-color: white; /* 背景颜色 */
            box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.1); /* 添加阴影效果 */
            transition: all 0.3s ease-in-out; /* 添加过渡效果 */
            z-index: 1000; /* 设置层级 */
            border-radius: 8px; /* 设置圆角 */
            opacity: 0; /* 初始透明度 */
        }

        .cart-modal.show {
            opacity: 1; /* 显示时透明度为1 */
        }

        .cart-modal-content {
            padding: 20px; /* 设置内边距 */
            max-height: 80vh; /* 设置最大高度 */
            overflow-y: auto; /* 允许垂直滚动 */
            margin: 0 auto; /* 水平居中 */
        }

        .cart-header {
            display: flex; /* 使用flex布局 */
            justify-content: space-between; /* 两端对齐 */
            align-items: center; /* 垂直居中 */
            margin-bottom: 20px; /* 下边距 */
            padding-bottom: 15px; /* 下内边距 */
            border-bottom: 2px solid #eee; /* 下边框 */
        }

        .cart-close {
            font-size: 24px; /* 字体大小 */
            cursor: pointer; /* 鼠标指针样式 */
            color: #666; /* 字体颜色 */
            width: 30px; /* 宽度 */
            height: 30px; /* 高度 */
            display: flex; /* 使用flex布局 */
            align-items: center; /* 垂直居中 */
            justify-content: center; /* 水平居中 */
            border-radius: 50%; /* 设置圆形 */
            transition: background-color 0.3s; /* 添加过渡效果 */
        }

        .cart-close:hover {
            background-color: #f0f0f0; /* 悬停时背景颜色 */
        }

        .cart-items {
            max-height: 300px; /* 设置最大高度 */
            overflow-y: auto; /* 允许垂直滚动 */
        }

        .cart-item {
            display: flex; /* 使用flex布局 */
            align-items: center; /* 垂直居中 */
            padding: 15px; /* 设置内边距 */
            border-bottom: 1px solid #eee; /* 下边框 */
            background: #fff; /* 背景颜色 */
            transition: background-color 0.3s; /* 添加过渡效果 */
        }

        .cart-item:hover {
            background-color: #f8f9fa; /* 悬停时背景颜色 */
        }

        .cart-item img {
            width: 80px; /* 图片宽度 */
            height: 80px; /* 图片高度 */
            object-fit: cover; /* 保持比例填充 */
            margin-right: 15px; /* 右边距 */
            border-radius: 4px; /* 设置圆角 */
        }

        .cart-item-details {
            flex-grow: 1; /* 填充剩余空间 */
        }

        .cart-item-remove {
            color: #dc3545; /* 删除按钮字体颜色 */
            cursor: pointer; /* 鼠标指针样式 */
            padding: 5px 10px; /* 设置内边距 */
        }

        /* 页脚样式 */
        .footer {
            background-color: #333; /* 页脚背景颜色 */
            color: #fff; /* 字体颜色 */
            padding: 30px 0; /* 设置上下内边距 */
            position: fixed; /* 固定页脚 */
            bottom: 0; /* 底部对齐 */
            width: 100%; /* 宽度100% */
            z-index: 100; /* 设置层级 */
        }

        .footer-content {
            max-width: 1200px; /* 最大宽度 */
            margin: 0 auto; /* 水平居中 */
            text-align: center; /* 文本居中 */
        }

        /* 模态框样式 */
        .modal {
            position: fixed; /* 固定定位 */
            z-index: 1000; /* 设置层级 */
            left: 0; /* 左侧对齐 */
            top: 0; /* 顶部对齐 */
            width: 100%; /* 宽度100% */
            height: 100%; /* 高度100% */
            overflow: auto; /* 允许滚动 */
            background-color: rgba(0, 0, 0, 0.7); /* 半透明背景 */
            transition: opacity 0.3s ease; /* 添加过渡效果 */
            display: flex; /* 使用flex布局 */
            justify-content: center; /* 水平居中 */
            align-items: center; /* 垂直居中 */
        }

        .modal-content {
            background-color: #fff; /* 模态框背景颜色 */
            padding: 20px; /* 设置内边距 */
            border: 1px solid #888; /* 边框 */
            width: 80%; /* 宽度 */
            max-width: 600px; /* 设置最大宽度 */
            border-radius: 8px; /* 设置圆角 */
            box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2); /* 添加阴影效果 */
            animation: slideIn 0.3s; /* 添加动画效果 */
        }

        @keyframes slideIn {
            from {
                transform: translateY(-30px); /* 从上方滑入 */
                opacity: 0; /* 初始透明度 */
            }
            to {
                transform: translateY(0); /* 到达目标位置 */
                opacity: 1; /* 结束透明度 */
            }
        }

        .close {
            color: #aaa; /* 关闭按钮颜色 */
            float: right; /* 右侧对齐 */
            font-size: 28px; /* 字体大小 */
            font-weight: bold; /* 字体加粗 */
        }

        .close:hover,
        .close:focus {
            color: black; /* 悬停或聚焦��颜色 */
            text-decoration: none; /* 去掉下划线 */
            cursor: pointer; /* 鼠标指针样式 */
        }

        .cart-buttons {
            display: flex; /* 使用flex布局 */
            gap: 10px; /* 设置间距 */
            margin-top: 20px; /* 设置顶部外边距 */
            align-items: center; /* 垂直居中 */
            flex-wrap: wrap; /* 换行 */
        }

        .cart-buttons button {
            flex: 1; /* 填充剩余空间 */
            min-width: 150px; /* 设置最小宽度 */
            display: flex; /* 使用flex布局 */
            align-items: center; /* 垂直居中 */
            justify-content: center; /* 水平居中 */
            gap: 5px; /* 设置间距 */
        }

        .cart-total {
            margin-top: 20px; /* 设置顶部外边距 */
            padding: 15px; /* 设置内边距 */
            border-top: 2px solid #eee; /* 上边框 */
            text-align: right; /* 右对齐 */
        }

        .cart-empty {
            padding: 20px; /* 设置内边距 */
            text-align: center; /* 文本居中 */
            color: #666; /* 字体颜色 */
        }

        .price {
            color: #ff4d4f; /* 价格字体颜色 */
            font-weight: bold; /* 字体加粗 */
            margin-top: 5px; /* 上边距 */
            background: rgba(255, 77, 79, 0.1); /* 背景颜色 */
            padding: 5px 10px; /* 设置内边距 */
            border-radius: 4px; /* 设置圆角 */
            display: inline-block; /* 行内块元素 */
        }

        .game-price {
            font-size: 24px; /* 字体大小 */
            color: #ff4d4f; /* 字体颜色 */
            font-weight: bold; /* 字体加粗 */
            margin: 15px 0; /* 上下边距 */
            display: flex; /* 使用flex布局 */
            align-items: center; /* 垂直居中 */
            background: rgba(255, 77, 79, 0.1); /* 背景颜色 */
            padding: 10px 15px; /* 设置内边距 */
            border-radius: 8px; /* 设置圆角 */
            position: relative; /* 相对定位 */
            overflow: hidden; /* 隐藏溢出内容 */
        }

        .game-price::before {
            content: '￥'; /* 价格前缀 */
            font-size: 18px; /* 字体大小 */
            margin-right: 2px; /* 右边距 */
            color: #ff4d4f; /* 字体颜色 */
        }

        .game-price-label {
            font-size: 14px; /* 字体大小 */
            color: #ff7875; /* 字体颜色 */
            margin-right: 10px; /* 右边距 */
            font-weight: normal; /* 字体正常 */
        }

        .game-price::after {
            content: ''; /* 伪元素 */
            position: absolute; /* 绝对定位 */
            top: 0; /* 顶部对齐 */
            left: 0; /* 左侧对齐 */
            right: 0; /* 右侧对齐 */
            bottom: 0; /* 底部对齐 */
            background: linear-gradient(45deg, rgba(255, 77, 79, 0.05), rgba(255, 77, 79, 0.1)); /* 渐变背景 */
            z-index: -1; /* 设置层级 */
        }

        .toast-message {
            position: fixed; /* 固定定位 */
            bottom: 20px; /* 底部对齐 */
            left: 50%; /* 水平居中 */
            transform: translateX(-50%); /* 通过变换居中 */
            background-color: rgba(40, 167, 69, 0.9); /* 背景颜色 */
            color: white; /* 字体颜色 */
            padding: 12px 24px; /* 设置内边距 */
            border-radius: 4px; /* 设置圆角 */
            z-index: 1000; /* 设置层级 */
            animation: fadeInOut 2s ease-in-out; /* 添加动画效果 */
        }

        @keyframes fadeInOut {
            0% {
                opacity: 0; /* 初始透明度 */
                transform: translate(-50%, 20px); /* 初始位置 */
            }
            15% {
                opacity: 1; /* 显示时透明度 */
                transform: translate(-50%, 0); /* 到达目标位置 */
            }
            85% {
                opacity: 1; /* 显示时透明度 */
                transform: translate(-50%, 0); /* 到达目标位置 */
            }
            100% {
                opacity: 0; /* 结束透明度 */
                transform: translate(-50%, -20px); /* 结束位置 */
            }
        }

        .checkout-button {
            background-color: #ff4d4f; /* 背景颜色 */
            color: white; /* 字体颜色 */
            border: none; /* 去掉边框 */
            padding: 10px 20px; /* 设置内边距 */
            border-radius: 4px; /* 设置圆角 */
            cursor: pointer; /* 鼠标指针样式 */
            margin-top: 10px; /* 设置顶部外边距 */
            transition: background-color 0.3s; /* 添加过渡效果 */
        }

        .checkout-button:hover {
            background-color: #ff7875; /* 悬停时背景颜色 */
        }

        .payment-modal {
            display: none; /* 默认隐藏 */
            position: fixed; /* 固定定位 */
            top: 50%; /* 垂直居中 */
            left: 50%; /* 水平居中 */
            transform: translate(-50%, -50%); /* 通过变换居中 */
            background: white; /* 背景颜色 */
            padding: 20px; /* 设置内边距 */
            border-radius: 8px; /* 设置圆角 */
            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1); /* 添加阴影效果 */
            z-index: 1100; /* 设置层级 */
            width: 90%; /* 宽度90% */
            max-width: 400px; /* 设置最大宽度 */
            opacity: 0; /* 初始透明度 */
            transition: opacity 0.3s ease; /* 添加过渡效果 */
        }

        .payment-modal.show {
            opacity: 1; /* 显示时透明度为1 */
        }

        .payment-options {
            display: flex; /* 使用flex布局 */
            gap: 15px; /* 设置间距 */
            margin: 20px 0; /* 设置上下外边距 */
        }

        .payment-option {
            flex: 1; /* 填充剩余空间 */
            padding: 15px; /* 设置内边距 */
            border: 2px solid #eee; /* 边框 */
            border-radius: 8px; /* 设置圆角 */
            cursor: pointer; /* 鼠标指针样式 */
            text-align: center; /* 文本居中 */
            transition: all 0.3s; /* 添加过渡效果 */
        }

        .payment-option:hover {
            border-color: #1890ff; /* 悬停时边框颜色 */
            background: rgba(24, 144, 255, 0.1); /* 悬停时背景颜色 */
        }

        .payment-option.selected {
            border-color: #1890ff; /* 选中时边框颜色 */
            background: rgba(24, 144, 255, 0.1); /* 选中时背景颜色 */
        }

        .payment-option img {
            width: 40px; /* 图片宽度 */
            height: 40px; /* 图片高度 */
            margin-bottom: 8px; /* 下边距 */
        }

        .payment-confirm-btn {
            width: 100%; /* 宽度100% */
            padding: 12px; /* 设置内边距 */
            background: #1890ff; /* 背景颜色 */
            color: white; /* 字体颜色 */
            border: none; /* 去掉边框 */
            border-radius: 4px; /* 设置圆角 */
            cursor: pointer; /* 鼠标指针样式 */
            font-size: 16px; /* 字体大小 */
            transition: background 0.3s; /* 添加过渡效果 */
        }

        .payment-confirm-btn:hover {
            background: #40a9ff; /* 悬停时背景颜色 */
        }

        .payment-confirm-btn:disabled {
            background: #ccc; /* 禁用时背景颜色 */
            cursor: not-allowed; /* 鼠标指针样式 */
        }

        .qr-modal {
            display: none; /* 默认隐藏 */
            position: fixed; /* 固定定位 */
            top: 50%; /* 垂直居中 */
            left: 50%; /* 水平居中 */
            transform: translate(-50%, -50%) scale(0.8); /* 通过变换居中并缩放 */
            background: white; /* 背景颜色 */
            padding: 20px; /* 设置内边距 */
            border-radius: 8px; /* 设置圆角 */
            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1); /* 添加阴影效果 */
            z-index: 1200; /* 设置层级 */
            text-align: center; /* 文本居中 */
            opacity: 0; /* 初始透明度 */
            transition: all 0.3s ease; /* 添加过渡效果 */
            min-width: 320px; /* 设置最小宽度 */
            max-width: 90%; /* 设置最大宽度 */
        }

        .qr-modal.show {
            opacity: 1; /* 显示时透明度为1 */
            transform: translate(-50%, -50%) scale(1); /* 通过变换居中恢复缩放 */
        }

        .qr-modal img {
            max-width: 200px; /* 设置最大宽度 */
            margin: 20px 0; /* 上下边距 */
            border: 1px solid #eee; /* 边框 */
            border-radius: 4px; /* 设置圆角 */
            padding: 10px; /* 设置内边距 */
        }

        .qr-modal p {
            color: #666; /* 字体颜色 */
            margin-top: 15px; /* 上边距 */
            font-size: 14px; /* 字体大小 */
        }

        .modal-overlay {
            display: none; /* 默认隐藏 */
            position: fixed; /* 固定定位 */
            top: 0; /* 顶部对齐 */
            left: 0; /* 左侧对齐 */
            width: 100%; /* 宽度100% */
            height: 100%; /* 高度100% */
            background: rgba(0, 0, 0, 0.5); /* 半透明背景 */
            z-index: 1050; /* 设置层级 */
            opacity: 0; /* 初始透明度 */
            transition: opacity 0.3s ease; /* 添加过渡效果 */
        }

        .modal-overlay.show {
            opacity: 1; /* 显示时透明度为1 */
        }

        .payment-modal .close-btn {
            position: absolute; /* 绝对定位 */
            top: 10px; /* 顶部对齐 */
            right: 10px; /* 右侧对齐 */
            width: 30px; /* 宽度 */
            height: 30px; /* 高度 */
            display: flex; /* 使用flex布局 */
            align-items: center; /* 垂直居中 */
            justify-content: center; /* 水平居中 */
            font-size: 24px; /* 字体大小 */
            color: #666; /* 字体颜色 */
            cursor: pointer; /* 鼠标指针样式 */
            border-radius: 50%; /* 设置圆形 */
            transition: all 0.3s; /* 添加过渡效果 */
            text-decoration: none; /* 去掉下划线 */
            line-height: 1; /* 行高 */
        }

        .payment-modal .close-btn:hover {
            background-color: #f0f0f0; /* 悬停时背景颜色 */
            color: #ff4d4f; /* 悬停时字体颜色 */
        }

        .payment-modal h2 {
            margin-bottom: 20px; /* 下边距 */
            padding-right: 30px; /* 右边距 */
        }

        .close-btn2 {
            position: absolute; /* 绝对定位 */
            top: 10px; /* 顶部对齐 */
            right: 10px; /* 右侧对齐 */
            width: 30px; /* 宽度 */
            height: 30px; /* 高度 */
            display: flex; /* 使用flex布局 */
            align-items: center; /* 垂直居中 */
            justify-content: center; /* 水平居中 */
            font-size: 24px; /* 字体大小 */
            color: #666; /* 字体颜色 */
            cursor: pointer; /* 鼠标指针样式 */
            border-radius: 50%; /* 设置圆形 */
            transition: all 0.3s; /* 添加过渡效果 */
            text-decoration: none; /* 去掉下划线 */
            line-height: 1; /* 行高 */
            background: transparent; /* 背景透明 */
            border: none; /* 去掉边框 */
            padding: 0; /* 去掉内边距 */
            z-index: 1; /* 设置层级 */
        }

        .close-btn2:hover {
            background-color: #f0f0f0; /* 悬停时背景颜色 */
            color: #ff4d4f; /* 悬停时字体颜色 */
        }

        .qr-modal h2 {
            margin-bottom: 20px; /* 下边距 */
            padding-right: 30px; /* 右边距 */
        }

        .complete-payment-btn {
            background: #52c41a; /* 背景颜色 */
            color: white; /* 字体颜色 */
            border: none; /* 去掉边框 */
            padding: 12px 24px; /* 设置内边距 */
            border-radius: 4px; /* 设置圆角 */
            cursor: pointer; /* 鼠标指针样式 */
            margin-top: 20px; /* 设置顶部外边距 */
            font-size: 16px; /* 字体大小 */
            transition: all 0.3s; /* 添加过渡效果 */
        }

        .complete-payment-btn:hover {
            background: #73d13d; /* 悬停时背景颜色 */
            transform: translateY(-2px); /* 悬停时向上移动 */
            box-shadow: 0 2px 8px rgba(82, 196, 26, 0.2); /* 添加阴影效果 */
        }
    </style>
</head>
<body>
<!-- 头部导航 -->
<header class="header">
    <div class="header-content">
        <a href="index.jsp" class="logo">
            <span>🎮 云城游戏</span> <!-- 网站名称 -->
        </a>
        <nav class="nav-links">
            <a href="index.jsp">游戏中心</a> <!-- 游戏中心链接 -->
            <a href="gouwuche.jsp">我的购物车</a> <!-- 我的购物车 -->
            <a href="#about">关于我们</a> <!-- 关于我们链接 -->
            <a href="dingdan.jsp">我的订单</a> <!-- 我的订单链接 -->
        </nav>
        <div class="auth-buttons">
            <% if (session.getAttribute("user") == null) { %> <!-- 检查用户是否登录 -->
            <a href="login.jsp" class="login-btn">登录</a> <!-- 登录按钮 -->
            <a href="register.jsp" class="register-btn">注册</a> <!-- 注册按钮 -->
            <% } else { %> <!-- 用户已登录 -->
            <div class="user-info">
                <span class="username">👤 <%= session.getAttribute("user") %></span> <!-- 显示用户名 -->
                <a href="logout" class="logout-btn">退出</a> <!-- 退出按钮 -->
            </div>
            <% } %>
        </div>
    </div>
</header>

<!-- 主要内容区域 -->
<main class="main-content">
    <%
        // 获取传递的参数
        String gameId = request.getParameter("gameId"); // 获取游戏ID
        String gameName = request.getParameter("gameName"); // 获取游戏名称
        String gameDesc = request.getParameter("gameDesc"); // 获取游戏描述
        String gameImg = request.getParameter("gameImg"); // 获取游戏图片
        String gameLinks = request.getParameter("gameLink"); // 获取游戏链接
        String gameMoney = request.getParameter("gameMoney"); // 获取游戏价格
    %>
    <div class="image-container">
        <img src="<%= gameImg %>" alt="<%= gameName %>" class="game-image"/> <!-- 显示游戏图片 -->
    </div>
    <div class="details-container">
        <h1 class="game-title">游戏详情</h1> <!-- 游戏详情标题 -->
        <p class="game-description">游戏名称：<%= gameName %></p> <!-- 显示游戏名称 -->
        <p class="game-description2">游戏描述：<%= gameDesc %></p> <!-- 显示游戏描述 -->
        <div class="game-price">
            <span class="game-price-label">游戏价格</span> <!-- 游戏价格标签 -->
            <%= gameMoney %> <!-- 显示游戏价格 -->
        </div>
        <a href="<%= gameImg %>" class="game-link" target="_blank">游戏链接</a> <!-- 游戏链接 -->

        <div class="cart-buttons">
            <button class="cart-button" onclick="addToCart('<%= gameId %>', '<%= gameName %>', '<%= gameMoney %>', '<%= gameImg %>')">🛒 加入购物车</button>
        </div>
    </div>
</main>

<!-- 购物车弹窗 -->
<div class="cart-modal" id="cartModal">
    <div class="cart-modal-content">
        <div class="cart-header">
            <h2>购物车</h2> <!-- 购物车标题 -->
            <span class="cart-close" onclick="closeCart()">&times;</span> <!-- 关闭购物车按钮 -->
        </div>
        <div class="cart-items" id="cartItems">
            <!-- 购物车商品将在这里动态显示 -->
        </div>
    </div>
</div>

<!-- 页脚 -->
<footer class="footer">
    <div class="footer-content">
        <p>© 2024 云城游戏门户. All rights reserved.</p> <!-- 页脚版权信息 -->
        <p>
            <a href="https://beian.miit.gov.cn/" target="_blank" style="color: #fff; text-decoration: none;">
                陕ICP备2024054614号
            </a>
            &nbsp;|&nbsp;
            <a href="http://www.beian.gov.cn/portal/registerSystemInfo" target="_blank" style="color: #fff; text-decoration: none;">
                <img src="https://img.mcfengqi.icu/LightPicture/2024/11/75fb7a50447cf897.png" alt="公安备案图标" style="vertical-align: middle; margin-right: 3px;">
                陕公网安备61019102000653
            </a>
        </p>
    </div>
</footer>
</body>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
    // 购物车组用于储商品
    let cartItems = []; // 初始化购物车数组

    // 添加到购物车的函数
    function addToCart(gameId, gameName, gameMoney, gameImg,gametxt) {
        $.ajax({
            url: 'AddToCartServlet',
            type: 'POST',
            data: {
                gameId: gameId,
                gameName: gameName,
                gameMoney: gameMoney,
                gameImg: gameImg,
                gametxt: gametxt
            },
            success: function(response) {
                alert('商品已添加到购物车！');
            },
            error: function() {
                alert('添加到购物车失败，请重试。');
            }
        });
    }

    // 更新购物车显示
    function updateCartDisplay() {
        const cartItemsContainer = document.getElementById('cartItems'); // 获取购物车商品容器
        cartItemsContainer.innerHTML = ''; // 清空容器内容

        let totalPrice = 0; // 初始化总价格

        // 遍历购物车商品
        cartItems.forEach((item, index) => {
            const price = typeof item.price === 'string' ?
                parseFloat(item.price.replace(/[^\d.]/g, '')) : // 处理价格字符串
                parseFloat(item.price) || 0; // 转换为数字
            totalPrice += price; // 累加总价格

            // 添加商品到购物车显示
            cartItemsContainer.innerHTML += `
                <div class="cart-item">
                    <img src="<%=gameImg%>" alt="<%=gameName%>">
                    <div class="cart-item-details">
                        <h3><%=gameName%></h3>
                        <p class="price">￥<%=gameMoney%></p>
                    </div>
                    <span class="cart-item-remove" onclick="removeFromCart(${index})">删除</span>
                </div>
            `;
        });

        // 如果购物车有商品
        if (cartItems.length > 0) {
            cartItemsContainer.innerHTML += `
                <div class="cart-total">
                    <h3>总计：￥<%=gameMoney%></h3>
                    <button class="checkout-button" onclick="checkout()">
                        结算 (${cartItems.length}件商品)
                    </button>
                </div>
            `;
        } else {
            cartItemsContainer.innerHTML = '<div class="cart-empty">购物车是空的</div>'; // 显示购物车为空提示
        }
    }

    // 从购物车中移除商品
    function removeFromCart(index) {
        cartItems.splice(index, 1); // 从购物车中移除商品
        updateCartDisplay(); // 更新购物车显示
    }

    // 显示购物车
    function showCart() {
        const cartModal = document.getElementById('cartModal'); // 获取购物车模态框
        cartModal.style.display = 'block'; // 显示模态框
        document.body.style.overflow = 'hidden'; // 防止背景滚动
        updateCartDisplay(); // 更新购物车显示
    }

    // 关闭购物车
    function closeCart() {
        const cartModal = document.getElementById('cartModal'); // 获取购物车模态框
        cartModal.classList.remove('show'); // 移除显示类
        document.body.style.overflow = ''; // 恢复背景滚动
        setTimeout(() => {
            cartModal.style.display = 'none'; // 隐藏模态框
        }, 300);
    }

    // 添加结算功能
    function checkout() {
        if (cartItems.length === 0) {
            alert('购物车是空的！'); // 提示购物车为空
            return; // 退出函数
        }
        showPaymentModal(); // 显示支付模态框
    }

    // 显示支付方式选择弹窗
    function showPaymentModal() {
        closeCart(); // 先关闭购物车弹窗
        const overlay = document.getElementById('modalOverlay'); // 获取模态框遮罩层
        const modal = document.getElementById('paymentModal'); // 获取支付模态框
        overlay.style.display = 'block'; // 显示遮罩层
        modal.style.display = 'block'; // 显示支付模态框
        document.body.style.overflow = 'hidden'; // 防止背景滚动

        // 触发重排以启用动画
        setTimeout(() => {
            overlay.classList.add('show'); // 添加显示类
            modal.classList.add('show'); // 添加显示类
        }, 10);
    }

    // 隐藏支付方式选择弹窗
    function hidePaymentModal() {
        const overlay = document.getElementById('modalOverlay'); // 获取模态框遮罩层
        const modal = document.getElementById('paymentModal'); // 获取支付模态框
        overlay.classList.remove('show'); // 移除显示类
        modal.classList.remove('show'); // 移除显示类
        document.body.style.overflow = ''; // 恢复背景滚动

        setTimeout(() => {
            overlay.style.display = 'none'; // 隐藏遮罩层
            modal.style.display = 'none'; // 隐藏支付模态框
        }, 300);
    }

    // 显示二维码弹窗
    function showQRModal(paymentType) {
        const qrUrls = {
            wechat: 'images/wx.jpg', // 微信支付二维码
            alipay: 'images/zfb.jpg', // 支付宝二维码
            qq: 'images/qq.jpg' // QQ支付二维码
        };

        // 先设置二维码图片源，确保图片存在
        const qrImg = document.getElementById('qrCode'); // 获取二维码图片元素
        qrImg.src = qrUrls[paymentType]; // 设置二维码图片源

        // 等待图片加载完成后再显示模态框
        qrImg.onload = function () {
            const qrModal = document.getElementById('qrModal'); // 获取二维码模态框
            const overlay = document.getElementById('modalOverlay'); // 获取模态框遮罩层

            overlay.style.display = 'block'; // 显示遮罩层
            qrModal.style.display = 'block'; // 显示二维码模态框

            // 触发重排以启用动画
            setTimeout(() => {
                qrModal.classList.add('show'); // 添加显示类
                overlay.classList.add('show'); // 添加显示类
            }, 10);
        };

        // 处理图片加载失败的情况
        // qrImg.onerror = function() {
        //     alert('二维码图片加载失败，请重试'); // 提示二维码加载失败
        //     hidePaymentModal(); // 隐藏支付模态框
        // };
    }

    // 隐藏二维码弹窗
    function hideQRModal() {
        const qrModal = document.getElementById('qrModal'); // 获取二维码模态框
        const overlay = document.getElementById('modalOverlay'); // 获取模态框遮罩层

        qrModal.classList.remove('show'); // 移除显示类
        overlay.classList.remove('show'); // 移除显示类

        setTimeout(() => {
            qrModal.style.display = 'none'; // 隐藏二维码模态框
            overlay.style.display = 'none'; // 隐藏遮罩层
            document.getElementById('qrCode').src = ''; // 清空二维码图片源
        }, 300);

        // 重置支付选项
        document.querySelectorAll('.payment-option').forEach(opt => {
            opt.classList.remove('selected'); // 移除选中状态
            opt.style.borderColor = '#eee'; // 重置边框颜色
            opt.style.backgroundColor = 'transparent'; // 重置背景颜色
        });
        document.getElementById('confirmPayment').disabled = true; // 禁用确认支付按钮
    }

    // 初始化支付选项的点击事件
    document.querySelectorAll('.payment-option').forEach(option => {
        option.addEventListener('click', function () {
            // 移除所有选项的选中状态
            document.querySelectorAll('.payment-option').forEach(opt => {
                opt.classList.remove('selected'); // 移除选中状态
            });
            // 添加当前选项的选中状态
            this.classList.add('selected'); // 添加选中状态
            // 启用确认按钮
            document.getElementById('confirmPayment').disabled = false; // 启用确认支付按钮
            // 添加选中效果
            this.style.borderColor = '#1890ff'; // 设置边框颜色
            this.style.backgroundColor = 'rgba(24, 144, 255, 0.1)'; // 设置背景颜色
        });
    });

    // 确认支付按钮点击事件
    document.getElementById('confirmPayment').addEventListener('click', function () {
        const selectedOption = document.querySelector('.payment-option.selected'); // 获取选中支付选项
        if (selectedOption) {
            const paymentType = selectedOption.dataset.payment; // 获取支付类型
            // 先隐藏支付选择模态框
            hidePaymentModal(); // 隐藏支付模态框
            // 短暂延迟后显示二维码
            setTimeout(() => {
                showQRModal(paymentType); // 显示二维码模态框
            }, 300);
        }
    });

    // 点击遮罩层关闭弹窗
    document.getElementById('modalOverlay').addEventListener('click', function (event) {
        // 只有当点击的是遮罩层本身时才关闭弹窗
        if (event.target === this) {
            const paymentModal = document.getElementById('paymentModal'); // 获取支付模态框
            const qrModal = document.getElementById('qrModal'); // 获取二维码模态框

            if (paymentModal.style.display === 'block') {
                hidePaymentModal(); // 隐藏支付模态框
            } else if (qrModal.style.display === 'block') {
                hideQRModal(); // 隐藏二维码模态框
            }
        }
    });

    // 添加点击外部关闭功能
    document.addEventListener('click', function (event) {
        const cartModal = document.getElementById('cartModal'); // 获取购物车模态框
        if (event.target === cartModal) {
            closeCart(); // 关闭购物车模态框
        }
    });

    // 修改购物车按钮点击事件
    document.querySelector('.cart-button2').onclick = function (event) {
        event.stopPropagation(); // 防止事件冒泡
        showCart(); // 显示购物车
    }

    // 完成支付函数
    function completePayment() {
        const selectedPayment = document.querySelector('.payment-option.selected'); // 获取选中的支付选项
        if (!selectedPayment) {
            alert('请选择支付方式！'); // 提示用户选择支付方式
            return; // 退出函数
        }

        const paymentType = selectedPayment.dataset.payment; // 获取支付类型
        const orderData = {
            total: '<%= gameMoney %>', // 订单总金额
            amount: '<%= gameMoney %>', // 订单金额
            status: '已支付', // 订单状态
            paytype: paymentType, // 支付类型
            gamename: '<%= gameName %>', // 游戏名称
            gameimg: '<%= gameImg %>', // 游戏图片
            gametxt: '<%= gameDesc %>', // 游戏描述
            user_id: 1  // 这里需要替换为实际的用户ID
        };

        // 发送订单数据到服务器
        fetch('OrderServlet', {
            method: 'POST', // 请求方法
            headers: {
                'Content-Type': 'application/json' // 设置请求头
            },
            body: JSON.stringify(orderData) // 将订单数据转换为JSON字符串
        })
            .then(response => response.json()) // 解析响应为JSON
            .then(data => {
                if (data.success) {
                    alert('支付成功！'); // 提示支付成功
                    window.location.href = 'dingdan.jsp'; // 跳转到订单页面
                } else {
                    alert('支付失败：' + data.error); // 提示支付失败
                }
            })
            .catch(error => {
                console.error('Error:', error); // 打印错误信息
                alert('系统错误，请稍后重试'); // 提示系统错误
            });
    }
</script>
</html>
